<template>
 <div class="swiper">
     <swiper  :options="swiperOption">
        <swiper-slide v-for="(item,index) of list" :key="index" class="swiper-slide">
            <img :src="item.image" @load="imageLoad">
            </swiper-slide>
        <!-- 左右箭头
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-button-prev" slot="button-prev"></div> -->
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    
 </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

 export default {
   name:'Swiper',
   components:{
       swiper, 
       swiperSlide
   },
   props:{
       list:Array
   },
   methods:{
    imageLoad(){
        this.$emit('imageLoad')
    }
   },
   data(){
     return{
       swiperOption:{
            pagination: '.swiper-pagination',
            autoplay:{
                delay:2500,//停留时间
                autoplayDisableOnInteraction:false
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            spaceBetween: 1,//图片间隔
            loop:true,  //循环
            speed:800, //滚动速度
        }
    }
   }
 }
</script>

 
<style lang="stylus" scoped>

 .swiper >>> .swiper-pagination-bullet-active {
  background: #fff;
}
.swiper {
  overflow: hidden;
  width: 100%;
}
 .swiper-slide img{
     width: 100%;
 }
 .swiper-pagination {
          height: 20px;
          font-size: 20px;
          color: #fff;
          letter-spacing: 0;
          line-height: 20px;
          bottom: 0;
}

</style>
